<template>
	<view class="home-page">
		<u-navbar leftIconColor="rgba(255,255,255,0.0)" :autoBack="false" :placeholder="true"
			bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				保單
			</view>
		</u-navbar>
		<view v-if="list.length >  0">
			<view class="content" v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="item-title">
						保单编号
					</view>
					<view class="item-text">
						{{item.id}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						关系
					</view>
					<view class="item-text">
						{{item.relationshipName}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						姓名
					</view>
					<view class="item-text">
						{{item.receiverName}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						年龄
					</view>
					<view class="item-text">
						{{item.receiverAge}}岁
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						退休年龄
					</view>
					<view class="item-text">
						{{item.age}}岁
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						缴纳期数
					</view>
					<view class="item-text">
						{{item.productCount}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						已缴纳期数
					</view>
					<view class="item-text">
						{{item.count}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						每月缴纳
					</view>
					<view class="item-text">
						{{item.totalPrice}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						退休每月可领取
					</view>
					<view class="item-text">
						{{item.payPrice}}
					</view>
				</view>
				<view class="item-bottom" v-if="item.status == 0">
					<view class="bottom-head">
						<view class="head-title">
							当月保单状态
						</view>
						<view class="head-text">
							未缴纳
						</view>
					</view>
					<view class="tips">
						(请联系您的专属保险专员{{item.brokerageUserName}}缴纳)
					</view>
					<view class="bottom-btn" @click="goup(item.id)">
						申请缴纳保单
					</view>
				</view>
				<view class="item-bottom" v-if="item.status == 10">
					<view class="bottom-head">
						<view class="head-title">
							当月保单状态
						</view>
						<view class="head-text">
							未缴纳
						</view>
					</view>
					<view class="tips">
						(请联系您的专属保险专员{{item.brokerageUserName}}缴纳)
					</view>
					<view class="bottom-btn">
						等待保险专员同意
					</view>
				</view>
			</view>
			<u-loadmore :status="status" margin-top="20" />
		</view>
		<view v-else>
			<u-empty mode="list" loading-text="努力加載中" loadmore-text="輕輕上拉" nomore-text="沒有更多了" text="列表為空"
				:margin-top="180"
				icon="">
			</u-empty>
		</view>

		<!-- <view class="content">
			<view class="item">
				<view class="item-title">
					保单编号
				</view>
				<view class="item-text">
					TW0356Y2025021105644
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					关系
				</view>
				<view class="item-text">
					配偶
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					姓名
				</view>
				<view class="item-text">
					李大大
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					年龄
				</view>
				<view class="item-text">
					38岁
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					退休年龄
				</view>
				<view class="item-text">
					60岁
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					缴纳期数
				</view>
				<view class="item-text">
					264
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					已缴纳
				</view>
				<view class="item-text">
					11
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					每月缴纳
				</view>
				<view class="item-text">
					3000
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					退休每月可领取
				</view>
				<view class="item-text">
					8200
				</view>
			</view>
			<view class="item-bottom">
				<view class="bottom-head">
					<view class="head-title">
						当月保单状态
					</view>
					<view class="head-text already">
						未缴纳
					</view>
				</view>
				<view class="bottom-btn upgrade">
					升级保单
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				status: 'loadmore',
			}
		},
		onLoad() {
			this.postlist()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.postlist()
		},
		methods: {
			goup(id){
				let params = {
					id: id,
				}
				this.$Request({
					method: 'post',
					url: '/app-api/trade/order/applyOrder',
					data: params,
					ismsg: true,
				}).then(res => {
					if (res.code == 0) {
						this.page = 1
						this.postlist()
					}
				})
				
			},
			postlist() {
				let params = {
					pageNo: this.page,
					pageSize: 10
				}
				this.$Request({
					method: 'GET',
					url: '/app-api/trade/order/page',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						if (res.data.list.length < 10) {
							this.status = 'nomore';
						}
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list]
						}

					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		background-image: url('../../static/real/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 362rpx;
		padding: 30rpx 30rpx 0;

		.nav-title {
			color: #fff;
		}

		.content {
			padding: 20rpx;
			border-radius: 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);
			margin-bottom: 30rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				margin-bottom: 10rpx;

				.item-title {
					color: #666666;
				}

				.item-text {
					color: #333333;
				}
			}

			.item-bottom {
				padding: 20rpx 0;
				border-top: 1rpx solid #F1F1F1;
				margin-top: 20rpx;

				.bottom-head {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;

					.head-title {
						color: #666666;
					}

					.head-text {
						color: #FF5050;
					}

					.already {
						color: #6FD190;
					}
				}

				.tips {
					margin-top: 10rpx;
					color: #FF5050;
					font-size: 24rpx;
				}

				.bottom-btn {
					padding: 20rpx 50rpx;
					border-radius: 20rpx;
					background-color: #FFA939;
					color: #fff;
					font-size: 28rpx;
					text-align: center;
					margin-top: 30rpx;
				}

				.upgrade {
					background-color: #6FD190;
				}
			}
		}
	}
</style>